<template>
  <div class="search">
    <input type="number" v-model="searchText" @keyup="getSearchText" :placeholder='placeholder' :maxlength='maxlength'>
    <i class="icon" @click="clearValue" v-if="searchText.trim()">x</i>
  </div>
</template>
<script>
import { ref } from 'vue'
import { formarUserValue, getNowDate } from '@/library/utils.js'
import { useStore } from 'vuex'
import loadData from '@/server/index.js'
export default {
  name: 'search',
  props: {
    placeholder: String,
    maxlength: Number
  },
  setup() {
    const searchText = ref('')
    const store = useStore()
    const getSearchText = e => {
      if (e.keyCode === 13 && searchText.value.trim()) {
        formarUserValue(searchText.value.trim())
        store.commit('setSearchText', formarUserValue(searchText.value.trim()))
        loadData(store, store.state.type, store.state.searchText)
      }
    }
    const clearValue = () => {
      loadData(store, store.state.type, getNowDate(store.state.type))
      store.commit('setSearchText', '')
      searchText.value = ''
    }
    return {
      searchText,
      getSearchText,
      clearValue
    }
  }
}
</script>
<style lang="less" scoped>
.search {
  position: relative;
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  input {
    margin: 0 14px;
    width: 100%;
    height: 26px;
    outline: none;
    padding: 0 10px;
    border: 1px solid #ccc;
  }
  i {
    position: absolute;
    top: -3px;
    right: 20px;
    line-height: 32px;
    height: 100%;
    width: 33px;
    text-align: center;
    // background-color: royalblue;
  }
}
</style>
